<template>

  <a-menu
      :style="{height:'100%'}"
      :selected-keys="activeMenu"
      accordion
      @menu-item-click="clickMenu"
  >

    <template v-for="route in routetlist" :key="route.path">
      <a-menu-item v-if="!route.children" :key="route.path">
        <template #icon>
          <component :is="route.icon"></component>
        </template>
        {{ route.name }}
      </a-menu-item>
      <a-sub-menu v-else :key="route.name">
        <template #icon>
          <component :is="route.icon"></component>
        </template>
        <template #title>Navigation 2</template>
        <a-menu-item v-for="item in route.children" :key="item.path">
          <template #icon>
            <component :is="item.icon"></component>
          </template>
          {{ item.name }}
        </a-menu-item>
      </a-sub-menu>

    </template>
  </a-menu>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import routetlist from "../router/routes.ts";
import {ref} from "vue";

const router = useRouter()
const activeMenu = ref(['/home'])
const clickMenu = (key: string) => {
  router.push({
    path: key
  })
};
// 路由调整时更新状态项
router.afterEach((to) => {
  activeMenu.value = [to.path];
});

router.beforeEach((to, from, next) => {
  window.document.title = to.name ? to.name.toString() : "myapp";
  next();
})
</script>
<style scoped>
.menu-demo {
  width: 100%;
  height: 600px;
}
</style>
